<script setup>
import { ref, onMounted, computed, inject } from 'vue'
import { useAssistantStore } from '@/stores/assistant'
import { useAuthStore } from '@/stores/auth'
import { useConfigStore } from '@/stores/config'
import { getSlogans } from '@/utils/chat'
import chatApi from '@/apis/chat'

import HorizontalCategories from '@/components/common/HorizontalCategories.vue'
import DynamicTyping from '@/components/common/DynamicTyping.vue'

const assistantStore = useAssistantStore()
const authStore = useAuthStore()

const categories = computed(() => {
  return [
    { id: 0, name: '全部分类' },
    { id: -1, name: '我的收藏', show: authStore.isAuthenticated },
    ...assistantStore.categories,
  ]
})

const keyword = ref('')
const active = ref(0)
const page = ref(1)
const nextPage = ref(1)
const items = ref([])
const slogans = computed(() => getSlogans('assistant'))

const getData = async () => {
  const category = categories.value[active.value]
  const params = { category_id: category.id, page: nextPage.value }
  if (keyword.value.length > 0) params.keyword = keyword.value

  const { data: pagination } = await chatApi.role.list('assistant', params)

  if (pagination.current_page === 1) {
    items.value = pagination.data
  } else {
    items.value.push(...pagination.data)
  }
}

//切换分类
const switchCategory = () => {
  page.value = 1
  getData()
}

//搜索
const search = (e) => {
  if (e.type === 'click' || (e.type === 'keydown' && e.key === 'Enter')) {
    page.value = 1
    getData()
  }
}

const clear = () => {
  page.value = 1
  getData()
}

//收藏
const favorite = async (index) => {
  const item = items.value[index]
  const apiFunction = item.favorite ? chatApi.role.favorite.delete : chatApi.role.favorite.add
  await apiFunction(item.id, 'assistant')
  item.favorite = !item.favorite
}

//加载
onMounted(() => {
  getData()
})
</script>

<template>
  <el-scrollbar>
    <div class="w-full p-3 space-y-2 sm:space-y-3">
      <!-- 头部-->
      <div class="font-bold text-2xl text-center px-2">创作助手</div>
      <div class="p-2 text-center" v-if="slogans.length > 0">
        <DynamicTyping :texts="slogans" />
      </div>
      <!-- 分类 -->
      <HorizontalCategories v-model="active" :categories="categories" @change="switchCategory" />
      <!-- 搜索条 -->
      <div class="mt-4">
        <el-input v-model="keyword" placeholder="搜索" @keydown="search" @clear="clear()" clearable>
          <template #prefix>
            <FontAwesomeIcon icon="search" />
          </template>
          <template #append>
            <el-button @click="search">搜索</el-button>
          </template>
        </el-input>
      </div>
      <!-- 列表 -->
      <div class="flex flex-wrap justify-between gap-3 sm:justify-start mt-4 cursor-pointer">
        <template v-for="(item, index) in items" :key="item.id">
          <div
            class="assistant-item relative"
            @click="$router.push({ name: 'assistantChat', params: { id: item.id } })"
          >
            <div class="assistant-fav absolute top-0 right-0 h-6 w-6" @click.stop="favorite(index)">
              <div :class="{ favorite: true, collected: item.favorite }">
                <div class="ico">
                  <FontAwesomeIcon icon="star" size="2xs" title="收藏" />
                </div>
              </div>
            </div>
            <div class="flex items-center space-x-2">
              <img class="w-10 sm:w-12 h-10 sm:h-12 rounded mt-1" :src="item.icon" />
              <div class="flex flex-col overflow-hidden">
                <div class="truncate text-sm sm:text-base font-bold">{{ item.name }}</div>
                <div>
                  <el-tag type="info" size="small">{{ item.category.name }}</el-tag>
                </div>
              </div>
            </div>
            <div class="text-xs sm:text-sm text-[--el-text-color-regular] mt-2">
              <p class="leading-6 line-clamp-2">{{ item.intro }}</p>
            </div>
          </div>
        </template>
      </div>
    </div>
  </el-scrollbar>
</template>

<style scoped>
.category-item {
  @apply px-2 py-1 rounded-md text-sm text-gray-500 cursor-pointer hover:bg-[--el-fill-color-dark];
}

.category-item.active {
  @apply bg-[--el-color-primary-light-8] text-[--el-color-primary];
}

.assistant-item {
  @apply rounded p-2 sm:p-4 bg-[--el-bg-color] w-[47.7%] sm:w-[300px] shadow-sm 
  sm:hover:shadow-md sm:hover:bg-[--el-bg-color];
}

.assistant-fav {
  @apply sm:opacity-0;
}

.assistant-item:hover .assistant-fav {
  @apply opacity-100;
}

.favorite {
  @apply relative h-full w-full rounded-bl-full rounded-tr leading-5 pl-1.5 cursor-pointer 
  text-[--el-color-info-light-3] bg-[--el-color-info-light-8];
}

.favorite .ico {
  @apply absolute -top-[1.5px] right-[3px];
}

.favorite.collected {
  @apply bg-[--el-color-warning-light-8] text-[--el-color-warning];
}
</style>
